<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import {
  getAllUsers,
  getAllUnregisteredUsers,
  registerUserConfirm,
  changeUserInfo as changeUserInfoApi,
  getUserInfoById,
} from "@/apis";

import { RegionText, RegionSelects } from "v-region";
import { ElMessage } from "element-plus";

const usersListTableData = ref<any[]>([]);
const companyUsers = ref<any[]>([]);

const handleConfirm = (id: any) => {
  console.log("确定按钮点击，用户信息：", id);
  const user = companyUsers.value.find((user) => user.id === id);
  if (user) {
    user.disabled = true;
  }
  registerUserConfirm(id)
    .then((res) => {
      console.log("注册成功", res);
      ElMessage.success("审批成功");
    })
    .catch((err) => {
      ElMessage.error("审批失败");
    });
};

function convertToNumber(data: string | number): number {
  if (typeof data === "string") {
    return parseInt(data, 10);
  } else {
    return data as number;
  }
}

const getStatusText = (status: string | number) => {
  let statusNumber = convertToNumber(status);
  switch (statusNumber) {
    case 1:
      return "普通用户";
    case 2:
      return "专家用户";
    case 3:
      return "企业用户";
    case 4:
      return "管理员";
    default:
      return "未知用户类型";
  }
};

interface RegionInputModel {
  province: string;
  city: string;
  area: string;
  town: string;
}

// 用户信息
const user = reactive({
  uuid: "",
  username: "",
  password: "",
  phone: "",
  region: <RegionInputModel>{},
});

// 确认按钮的处理函数
const handleDialogConfirm = () => {
  // 可以在这里添加提交表单的逻辑
  console.log("提交用户信息：", user);
  dialogVisible.value = false; // 关闭弹窗
  user.region.area = "0";
  user.region.town = "0";
  changeUserInfoApi(
    user.uuid,
    user.username,
    user.password,
    user.phone,
    user.region,
  )
    .then((res) => {
      console.log(res.data);
      ElMessage.success("信息修改成功");
      ElMessage.success("请刷新页面");
    })
    .catch((err) => {
      ElMessage.error("网络错误");
    });
};

// 取消按钮的处理函数
const handleDialogCancel = () => {
  dialogVisible.value = false; // 关闭弹窗
};

const dialogVisible = ref(false);

// const changeUserInfoHandler = async (id: string) => {
const changeUserInfoHandler = async (data: any) => {
  dialogVisible.value = true;
  user.uuid = data.uuid;
  // let res = await getUserInfoById(id);
  // console.log(res);
  user.username = data?.name;
  user.phone = data?.phone;
  user.password = data?.password;
  user.region = data?.region;
  console.log(user);
};

onMounted(async () => {
  const userResponse = await getAllUsers();
  usersListTableData.value = userResponse.data.data.map((item: any) => {
    return {
      ...item,
      areaObj: ref({
        area: item.region,
      }),
    };
  });
  console.log(usersListTableData.value);

  const companyResponse = await getAllUnregisteredUsers();

  companyUsers.value = companyResponse?.data?.data?.map((user: any) => ({
    ...user, // 复制原有的属性
    disabled: false, // 添加disabled属性，默认值为false
  }));
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改用户信息"
    width="40%"
    @close="handleDialogCancel"
  >
    <template #footer>
      <el-button @click="handleDialogCancel">取消</el-button>
      <el-button type="primary" @click="handleDialogConfirm">确定</el-button>
    </template>
    <el-form ref="userForm" :model="user" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="user.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="区域">
        <RegionSelects v-model="user.region" :area="false" />
      </el-form-item>
    </el-form>
  </el-dialog>
  <div>
    <h1>当前注册用户</h1>
    <div>
      <el-table :data="usersListTableData" style="width: 100%">
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>

        <el-table-column prop="region" label="区域">
          <template #default="{ row }">
            <!-- <span>{{ row.region }}</span> -->
            <RegionText v-model="row.region" separator="-"></RegionText>

            <!--            <RegionText v-model="row.areaObj"></RegionText>-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            {{ getStatusText(row?.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- <el-button type="primary" @click="changeUserInfoHandler(row?.uuid)" -->
            <el-button type="primary" @click="changeUserInfoHandler(row)"
              >修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    <h1>待审批企业用户</h1>
    <div>
      <el-table :data="companyUsers" style="width: 100%">
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="company" label="公司名称"></el-table-column>
        <el-table-column prop="legal" label="法人"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              @click="handleConfirm(row?.uuid)"
              :disabled="row.disabled"
              >通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>-->
  </div>
</template>

<style scoped></style>
